<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>首页</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!--引入初始化样式-->
    <link rel="stylesheet" href="../css/reset.css"/>

    <!--引入整页样式-->
    <link rel="stylesheet" href="css/index.css"/>

    <!--mui-->
    <link rel="stylesheet" href="../lib/mui.css"/>
    <script src="../lib/mui.js"></script>

    <script src="../js/jquery-1.12.2.min.js"></script>
    <script src="./js/index.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body style="background-color:#f5f5f5;">
<div class="mui-content">
    <div class="main">
        <div id="segmentedControl" class="mui-segmented-control">
            <a class="mui-control-item mui-active" href="#item1">商品</a>
            <a class="mui-control-item" href="#item2">详情</a>
        </div>
    </div>
    <div class="one">
        <div id="item1" class="mui-control-content mui-active">
            <div id="scroll" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div style="overflow: hidden" class="mui-slider">
                        <div class="mui-slider-group">
                            <div class="mui-slider-item"><a href="#"><img src="../images/qdy1.jpg"/></a></div>
                            <div class="mui-slider-item"><a href="#"><img src="../images/qdy2.jpg"/></a></div>
                            <div class="mui-slider-item"><a href="#"><img src="../images/qdy3.jpg"/></a></div>
                        </div>
                    </div>
                    <div class="news">
                        <p class="bt">新鲜秋刀鱼100g 鲜香美味 海鲜佳选</p>
                        <p><span class="fh">￥</span><span class="price">34.5</span> <span class="style">到店自取</span></p>
                        <p class="add" id="alertBtn"><img src="../images/local_icon.png" alt=""><span class="adrs">武汉市江汉区德润广场</span></p>
                        <img class="icon" src="../images/detail-page_btn.png" alt="">
                    </div>
                    <div class="ss">
                        <div id="search">
                            <input id="ma" type="number" placeholder="搜索转售人昵称">
                            <img src="../images/search.png" alt="">
                        </div>
                        <div class="lxr">
                            <ul>
                                <li data-isChange="0">
                                    <img src="../images/mv1.jpg" alt="">
                                    <span class="name">SONY</span>
                                    <span class="num">3份</span>
                                    <span class="status">转售</span>
                                </li>
                                <li data-isChange="0">
                                    <img src="../images/mv2.jpg" alt="">
                                    <span class="name">SONY</span>
                                    <span class="num">3份</span>
                                    <span class="status">转售</span>
                                </li>
                                <li data-isChange="0">
                                    <img src="../images/mv3.jpg" alt="">
                                    <span class="name">SONY</span>
                                    <span class="num">3份</span>
                                    <span class="status">转售</span>
                                </li>
                                <li data-isChange="0">
                                    <img src="../images/mv4.jpg" alt="">
                                    <span class="name">SONY</span>
                                    <span class="num">3份</span>
                                    <span class="status">转售</span>
                                </li>
                                <li data-isChange="0">
                                    <img src="../images/mv5.jpg" alt="">
                                    <span class="name">SONY</span>
                                    <span class="num">3份</span>
                                    <span class="status">转售</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="mui-numbox" data-numbox-step='1' data-numbox-min='0' data-numbox-max='100'>
                <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                <input class="mui-numbox-input" type="number" value="1"/>
                <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                </div>
                <!--<img class="img" src="../images/snxy.png" alt="">-->
                <!--<span class="total">-->
                    <!--<span class="num"> 0 </span> 份-->
                <!--</span>-->
                <a class="buy" href="#">立即购买</a>
            </div>
        </div>
        <div id="item2" class="mui-control-content">
           <div class="xq">
               <img src="../images/ct.jpeg" alt="">
           </div>
        </div>
    </div>
</div>
<div class="mui-backdrop">
    <div class="pick">
        <img class="big" src="../images/solider.png" alt="">
        <img class="small" src="../images/px.jpg" alt="">
        <div class="wz">
            <p class="p1">新鲜秋刀鱼100g 鲜香美味 海鲜佳选</p>
            <p class="p2">
                <span>￥</span>50.5
            </p>
            <p class="p3">
                购买商品获得的赠品可在'我的礼品'中立即转售
            </p>
            <img class="ig" src="../images/g4.png" alt="">
        </div>
        <a class="exit" href="#"></a>
    </div>
</div>
<div class="mui-backdrop1">
    <div class="tc">
        <p>请优先购买用户转售商品</p>
        <a href="#" class="no">取消</a>
        <a href="#" class="yes">确认</a>
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>

</body>
<script>
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    var info = document.getElementById("info");
    document.getElementById("alertBtn").addEventListener('tap', function() {
        mui.alert('<p>武汉市江岸区德润大厦519</p>'+'<p>上海市杨浦区德润大厦520</p>'+'<p>深圳市福田区德润大厦521</p>', '商家地址：', function() {
            return;
        });
    });
</script>
</html>